<template>
  <div class="content-box">
    <nav-title title="离职补偿金审批" :routerLink="routerLink" />
    <!-- 发起人基本信息 -->
    <div class="regulations-box">
      <div class="title">发起人基本信息</div>
      <div class="information">
        <p class="info-cell clearfix">
          <label class="label">姓名</label>
          <span class="value">{{ cWfName }}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">部门</label>
          <span class="value">{{ cWfDeptdescr }}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">岗位</label>
          <span class="value">{{ cWfJcDescr }}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">联系电话</label>
          <span class="value">{{ cWfPhone }}</span>
        </p>
      </div>
    </div>

    <!-- 基本信息 -->
    <div class="regulations-box">
      <div class="title">基本信息</div>
      <div class="information">
        <p class="info-cell clearfix">
          <label class="label">员工ID</label>
          <span class="value">{{ emplid }}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">姓名</label>
          <span class="value">{{nameDisplay}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">部门</label>
          <span class="value">{{rsFullName}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">岗位</label>
          <span class="value">{{jobcodeDescr}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">职等</label>
          <span class="value">{{rsJobLevel}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">带教人</label>
          <span class="value">{{cName}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">入职日期</label>
          <span class="value">{{lastHireDt}}</span>
        </p>
      </div>
    </div>

    <!-- 流程信息 -->
    <div class="regulations-box">
      <div class="title">流程信息</div>
      <!--<p class="info-cell clearfix">
        <label class="label">离职日期</label>
        <span class="value"></span>
      </p>
      <p class="info-cell clearfix">
        <label class="label">辞退说明</label>
        <span class="value"></span>
      </p>-->

      <table class="flow-table">
        <thead>
          <td>离职补偿金</td>
          <td>发放月份</td>
        </thead>
        <tr v-for="compensate in compensateList">
          <td>{{compensate.amt}}元</td>
          <td>{{compensate.calPrdId}}</td>
        </tr>
      </table>

    </div>

    <div class="regulations-box">
      <div class="title">流程图</div>
      <!-- 流程图 -->
      <v-flow-charts :transNum="cTransactionNbr"></v-flow-charts>
    </div>
    <div class="regulations-box">
      <!-- 审批意见 -->
      <div class="regulations-box">
        <div class="info-label">审批意见</div>
        <div class="info-label-text">
          <textarea v-if="approved == '0'" placeholder="请在这里输入..." rows="5" v-model="cComments"></textarea>
          <textarea v-else="" readonly rows="5" v-model="cComments"></textarea>
        </div>
      </div>
    </div>

    <div style="height: 50px"></div>
    <!-- 底部按钮 -->
    <div v-if="approved == '0'">
      <operation-btn @doOperate="doOperate" :cApprovalSw="cApprovalSw" :cDenySw="cDenySw" :cPushbackAllSw="cPushbackAllSw" :cAddSw="cAddSw"></operation-btn>
    </div>

  </div>
</template>

<script>
import { dateFormat } from 'vux'
import {
  getCompensate,
  getCompensateProcess,
  getCompensateApprove
} from '../../api/api'
import { json2Form } from '../../util/http'
import operationBtn from './common/operationBtn'
import vFlowCharts from '../formalStaff/common/flowChart'

export default {
  components: {
    dateFormat,
    operationBtn,
    vFlowCharts
  },
  created() {
    this.cTransactionNbr = this.$route.query.cTransactionNbr
    this.approved = this.$route.query.approved
    if (this.$route.query.approved == '0') {
      this.routerLink = 'TodoList'
    } else if (this.$route.query.approved == '1') {
      this.routerLink = 'DoneList'
    } else {
      this.routerLink = 'MyApplication'
    }
    //补偿金信息
    this.getCompensateInfo()
  },
  mounted() {
  },
  data() {
    return {
      //返回需要跳转到哪个页面
      routerLink: '',
      //是否从已审批页面跳转过来
      approved: '0',
      //发起人信息
      cWfName: '',
      cWfDeptdescr: '',
      cWfJcDescr: '',
      cWfPhone: '',

      //基本信息
      emplid: '',
      nameDisplay: '',
      rsFullName: '',
      jobcodeDescr: '',
      rsJobLevel: '',
      cName: '',
      lastHireDt: '',

      //流程信息
      compensateList: [],

      //按钮点击的参数
      cWfType: '',
      cTransactionNbr: '',
      cUserId: '',
      cComments: '',

      cApprovalSw: '',
      cDenySw: '',
      cPushbackAllSw: '',
      cAddSw: ''
    }
  },
  methods: {
    getCompensateInfo() {
      let params = {
        cTransactionNbr: this.cTransactionNbr
      }
      getCompensate(params)
        .then(res => {
          const that = this
          if (res && res.retCode === '000000') {
            //发起人信息
            this.cWfName = res.retData.cWfName
            this.cWfDeptdescr = res.retData.cWfDeptdescr
            this.cWfJcDescr = res.retData.cWfJcDescr
            this.cWfPhone = res.retData.cWfPhone

            //基本信息
            this.emplid = res.retData.emplid
            this.nameDisplay = res.retData.nameDisplay
            this.rsFullName = res.retData.rsFullName
            this.jobcodeDescr = res.retData.jobcodeDescr
            this.rsJobLevel = res.retData.rsJobLevel
            this.cName = res.retData.cName
            this.lastHireDt = dateFormat(
              new Date(res.retData.lastHireDt),
              'DD/MM/YYYY'
            )

            //流程信息
            this.compensateList = res.retData.dmcDtls

            this.cApprovalSw = res.retData.cApprovalSw
            this.cDenySw = res.retData.cDenySw
            this.cPushbackAllSw = res.retData.cPushbackAllSw
            this.cAddSw = res.retData.cAddSw

            this.cWfType = res.retData.cWfType
            this.cTransactionNbr = res.retData.cTransactionNbr
          } else {
            this.$vux.alert.show({
              title: '',
              content: res.retMsg
            })
          }
        })
        .catch(res => {
          this.$vux.alert.show({
            title: '警告',
            content: '网络异常，请稍后重试'
          })
        })
    },
    doOperate(actionType) {
      //同意审批
      let params = {
        c_WF_TYPE: this.cWfType,
        c_TRANSACTION_NBR: this.cTransactionNbr,
        c_ACTION_TYPE: actionType,
        c_COMMENTS: this.cComments
      }

      if (actionType == 'AddStep') {
        //加签需要跳转至加签页面，并携带参数
        this.$router.push({
          name: 'Visa',
          params: {
            c_TRANSACTION_NBR: this.cTransactionNbr,
            c_WF_TYPE: this.cWfType,
            c_COMMENTS: this.cComments,
            c_Link: 'Compensate'
          }
        })
      } else {
        getCompensateApprove(json2Form(params))
          .then(res => {
            if (res && res.retCode === '000000') {
              let _this = this
              this.$vux.alert.show({
                title: '成功',
                content: '操作成功',
                onHide() {
                  _this.$router.push('/TodoList')
                }
              })
            } else {
              this.$vux.alert.show({
                title: '',
                content: res.retMsg
              })
            }
          })
          .catch(res => {
            this.$vux.alert.show({
              title: '警告',
              content: '网络异常，请稍后重试'
            })
          })
      }
    }
  }
}
</script>

<style type="text/scss" lang="scss">
.flow-table {
  width: 80%;
  margin: 10px auto;
  text-align: center;
  thead {
    font-weight: 700;
    color: #333;
  }
  td {
    border: 2px solid #eee;
  }
}
@import '../../styles/staff.scss';
</style>
